<template>
    <Popup class="tech-protocol-detail" v-model="visible" :close-on-click-overlay="false" :overlay="false">
        <div v-if="content" class="protocol-content" v-html="content"></div>
        <div class="action-btns">
            <Button @click="cancel">不同意</Button>
            <Button class="tech-btn" :style="themeBackround" :round="buttonRound" @click="ensure">同意</Button>
        </div>
    </Popup>
</template>

<script>
import { Popup, Button } from 'vant';
import ModeMixin from '@common/mixin';
export default {
    name: 'ProtocalDetail',
    mixins: [ModeMixin],
    components: {
        Popup,
        Button,
    },
    props: {
        content: {
            type: [String, Boolean],
            default: '',
        },
    },
    data() {
        return {
            visible: false,
        };
    },
    methods: {
        show() {
            this.visible = true;
        },
        close() {
            this.visible = false;
        },
        ensure() {
            this.$emit('ensure', true);
            this.close();
        },
        cancel() {
            this.$emit('ensure', false);
            this.close();
        },
    },
};
</script>

<style lang="less">
.tech-protocol-detail {
    width: 100%;
    height: 100vh;
    .flex-column-center();
    .protocol-content {
        flex: 1;
        .p(@gap);
        .scroll-y();
    }
    .action-btns {
        width: 100%;
        height: 44px;
        .flex();
        .border-line-top(@border-color, 0, 0);
        .van-button {
            flex: 1;
            border: none;
            border-radius: 0;
        }
    }
}
</style>
